<template>
    <div class="recom">
        <div class="recom-left">
            <div class="recom-left-top">
                <div class="recom-left-title">
                    {{this.leftAll.hotTitle}}
                </div>
                <div class="recom-left-time">
                    <div class="recom-left-time-left">距结束</div>
                    <van-count-down class="recom-left-time-right" :timeData ="timeData">
                        <template >
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                </div>
            </div>
            <div class="recom-left-content" @click="leftAllClick(leftAll.hotName)">
                <div class="recom-left-content-left">
                    <img :src="this.leftAll.hotImgUrl" />
                </div>
                <div class="recom-left-content-right">
                    {{this.leftAll.hotDesc}}
                </div>
            </div>
            <div class="recom-left-down">
                <div class="recom-left-down-number">
                    <p style="font-weight: bold">限量</p>
                    <p style="color: #aaaaaa">{{this.leftAll.hotNumber}}</p>
                    <p style="color: #aaaaaa">份</p>
                </div>
                <div class="recom-left-down-price">
                    <p>￥</p>
                    <p>{{this.leftAll.hotPrice}}</p>
                    <p>起</p>
                </div>
            </div>
        </div>
        <div class="recom-right">
            <div class="recom-right-top" @click="rightTopUp()">
                <div class="recom-right-top-left">
                    <p class="recom-right-title">{{this.rightTop.hotTitle}}</p>
                    <p class="recom-right-content">{{this.rightTop.hotDesc}}</p>
                </div>
                <div class="recom-right-top-right">
                    <img :src="this.rightTop.hotImgUrl" />
                </div>
            </div>
            <div class="recom-right-down" @click="rightTopDown()">
                <div class="recom-right-down-left">
                    <p class="recom-right-title">{{this.rightDown.hotTitle}}</p>
                    <p class="recom-right-content">{{this.rightDown.hotDesc}}</p>
                </div>
                <div class="recom-right-down-right">
                    <img :src="this.rightDown.hotImgUrl" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeRecom",

        data(){
            return{
                timeData:{
                  hours: undefined,
                  minutes: undefined,
                  seconds: undefined
                },
                indexHotList: [],
                leftAll:{
                    hotTitle: '',
                    hotDesc: '',
                    hotImgUrl: '',
                    hotPrice: '',
                    hotNumber: ''
                },
                rightTop:{
                    hotImgUrl: '',
                    hotDesc: '',
                    hotTitle: ''
                },
                rightDown:{
                    hotImgUrl: '',
                    hotDesc: '',
                    hotTitle: ''
                },

            }
        },
        mounted() {
            this.allIndexHot();
            // 调用倒计时 每一秒一次
            setInterval(()=>{
                this.newTime();
            },1000)
        },
        methods:{
            leftAllClick(hotName) {
              this.getRequest("/home/guess/listOne/?guessName="+hotName).then(resp => {
                const data = resp.data[0];
                let homeRecom = {
                  imgUrl: data.guessImgUrl,
                  name: data.guessName,
                  desc: data.guessDesc,
                  address: data.guessAddress,
                  mark: data.guessMark,
                  rank: data.guessRank,
                  data: data.guessData,
                  remark: data.guessRemarks,
                  line: data.guessLine,
                  title: data.guessTitle
                };
                this.$store.dispatch('homeR', homeRecom);
                this.$router.push("/scedetail")
              })
            },
            allIndexHot(){
                this.getRequest("/home/hot/").then(resp => {
                    this.indexHotList = resp.data;
                    this.leftAll.hotTitle = this.indexHotList[0].hotTitle;
                    this.leftAll.hotImgUrl = this.indexHotList[0].hotImgUrl;
                    this.leftAll.hotDesc = this.indexHotList[0].hotDesc;
                    this.leftAll.hotPrice = this.indexHotList[0].hotPrice;
                    this.leftAll.hotNumber = this.indexHotList[0].hotNumber;
                    this.leftAll.hotName = this.indexHotList[0].hotName;

                    this.rightTop.hotTitle = this.indexHotList[1].hotTitle;
                    this.rightTop.hotImgUrl = this.indexHotList[1].hotImgUrl;
                    this.rightTop.hotDesc = this.indexHotList[1].hotDesc;

                    this.rightDown.hotTitle = this.indexHotList[2].hotTitle;
                    this.rightDown.hotImgUrl = this.indexHotList[2].hotImgUrl;
                    this.rightDown.hotDesc = this.indexHotList[2].hotDesc;

                })
            },
            // 倒计时
            newTime(){
                var date = new Date();
                let h = date.getHours();
                let f = date.getMinutes();
                let s = date.getSeconds();

                let fh = 23 - h;
                let ff = 25 - f;
                let fs = 59 - s;

                if (ff < 0){
                    this.timeData.hours = 0;
                    this.timeData.minutes = 0;
                    this.timeData.seconds = 0;
                } else {
                    this.timeData.hours = fh;
                    this.timeData.minutes = ff;
                    this.timeData.seconds = fs;
                }

            },
            rightTopUp(){
              this.$router.push("/recomRightUp");
            },
            rightTopDown() {
              this.$router.push("/recomRightDown")
            }
        }
    }
</script>

<style scoped>
.recom{
    width: 100%;
    margin-top: -10%;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
}
.recom-left{
    width: 50%;
    border-right: 1px solid #e2e3e5;
}
.recom-left-top{
    padding: 6% 0 0 2%;
    display: flex;
    justify-content: space-between;
}
.recom-left-content{
    display: flex;
    justify-content: space-between;
    margin-top: .3rem;
}
.recom-left-content-left{
    width: 55%;
}
.recom-left-content-right{
    width: 45%;
    padding-left: .2rem;
    font-size: 16px;
    line-height: 18px;
}
.recom-left-down{
    display: flex;
    justify-content: space-between;
}
.recom-left-down-number{
    width: 34%;
    padding-top: .2rem;
    padding-left: .2rem;
    display: flex;
    justify-content: space-between;
}
.recom-left-down-price{
    padding-top: .2rem;
    padding-right: .2rem;
    display: flex;
    justify-content: space-between;
    color: red;
    font-weight: bold;
    font-size: 16px;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: black;
}
.block {
    display: inline-block;
    width: 16px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: black;
}
.recom-right{
    width: 50%;
    border-left: 1px solid #e2e3e5;
}
.recom-right-top, .recom-right-down{
    padding: 8% 0 2% 6%;
}
.recom-right-top{
    border-bottom: 1px solid #e2e3e5;
    display: flex;
    justify-content: space-between;
}
.recom-right-down{
    display: flex;
    justify-content: space-between;
}
.recom-left-title{
    font-size: 18px;
    font-weight: bold;
    color: red;
    width: 38%;
}
.recom-left-time{
    width: 62%;
    font-size: 15px;
    line-height: .35rem;
    font-weight: bolder;
    display: flex;
    justify-content: space-between;
}
.recom-left-time-left{
    width: 40%;
}
.recom-left-time-right{
    width: 60%;
}
.recom-right-title{
    font-size: 15px;
    font-weight: bold;
    padding-bottom: .3rem;
}
.recom-right-content{
    font-size: 15px;
    font-weight: bold;
    color: #e2e3e5;
}
.recom-left-content-left>img {
    height: 70px;
    width: 120px;
    overflow: hidden;
    max-width: 100%;
    padding-top: .2rem;
    padding: 0 .2rem 0 .1rem;
}
.recom-right-top-right>img{
    width: 70px;
    height: 70px;
    margin-top: -.3rem;
}
.recom-right-down-right>img{
    width: 70px;
    height: 70px;
    margin-top: -.3rem;
}
</style>